<script setup>
import { computed, ref } from "vue";
import openEyes from "@/assets/images/open-eyes.svg";
import closeEyes from "@/assets/images/close-eyes.svg";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入8-20位字母+数字+特殊字符",
  },
  prepend: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "40px",
  },
});
const emit = defineEmits(["update:modelValue", "enterNative"]);
const isLook = ref(false);
const passwords = computed({
  set: (val) => {
    emit("update:modelValue", val);
  },
  get: () => {
    return props.modelValue;
  },
});
const enterNative = () => {
  emit("enterNative");
};
</script>
<template>
  <div class="input-line" :style="'width:' + width">
    <el-input
      :placeholder="placeholder"
      v-model.trim="passwords"
      oncopy="return false"
      onpaste="return false"
      oncut="return false"
      oncontextmenu="return false"
      :maxlength="20"
      :type="isLook ? 'text' : 'password'"
      @keyup.enter.native="enterNative"
      autocomplete="new-password"
    >
      <template v-if="prepend" v-slot="prepend"
        ><img
          src="@/assets/images/lock.svg"
          alt=""
          style="width: 14px; height: 14px"
      /></template>
    </el-input>
    <div class="end-logo" :style="'height:' + height">
      <img
        v-if="passwords != ''"
        src="@/assets/images/gray_close.png"
        alt=""
        style="
          width: 14px;
          height: 14px;
          cursor: pointer;
          position: relative;
          top: -2px;
          margin-right: 10px;
        "
        @click="passwords = ''"
      />
      <img
        :src="isLook ? openEyes : closeEyes"
        alt=""
        style="
          width: 14px;
          height: 14px;
          cursor: pointer;
          position: relative;
          top: -2px;
        "
        @mousedown="isLook = true"
        @mouseup="isLook = false"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.input-line {
  width: 100%;
  position: relative;
  .end-logo {
    position: absolute;
    top: 0;
    right: 0;
    // height: 40px;
    padding-right: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
